<template>
  <view class="date-picker">
    <view class="date-picker-trigger" :class="[disabled ? 'date-picker-trigger-disabled' : '']" @click="showpop">
      <slot :formatValue="formatValue">
        <view class="text">
          <text class="selected" v-if="formatValue">{{ formatValue }}</text>
          <text class="placeholder" v-else>{{ placeholder }}</text>
        </view>
        <view v-if="formatValue && allowClear" class="btn-icon-clear" @click.stop="handleClear">
          <ve-icon name="icon-clear" size="32" />
        </view>
        <view v-if="arrow" class="arrow" @click.stop="null">
          <ve-icon name="arrow_right_0" size="32" :block="true" />
        </view>
      </slot>
    </view>
    <customPicker
      ref="picker"
      :show="show"
      :closeOnClickOverlay="closeOnClickOverlay"
      :columns="columns"
      :title="title"
      :itemHeight="itemHeight"
      :showToolbar="showToolbar"
      :visibleItemCount="visibleItemCount"
      :defaultIndex="innerDefaultIndex"
      :cancelText="cancelText"
      :confirmText="confirmText"
      :cancelColor="cancelColor"
      :confirmColor="confirmColor"
      :immediateChange="true"
      @close="close"
      @cancel="cancel"
      @confirm="confirm"
      @change="change"
    >
    </customPicker>
  </view>
</template>

<script>
  function times(n, iteratee) {
    let index = -1
    const result = Array(n < 0 ? 0 : n)
    while (++index < n) {
      result[index] = iteratee(index)
    }
    return result
  }
  import dayjs from 'dayjs'
  import customPicker from './customPicker.vue'

  /**
   * DatetimePicker 时间日期选择器
   * @description 此选择器用于时间日期
   * @tutorial https://ijry.github.io/uview-plus/components/datetimePicker.html
   * @property {Boolean}			show				用于控制选择器的弹出与收起 ( 默认 false )
   * @property {Boolean}			showToolbar			是否显示顶部的操作栏  ( 默认 true )
   * @property {String | Number}	value				绑定值
   * @property {String}			title				顶部标题
   * @property {String}			mode				展示格式 mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择  ( 默认 ‘datetime )
   * @property {Number}			maxDate				可选的最大时间  默认值为后10年
   * @property {Number}			minDate				可选的最小时间  默认值为前10年
   * @property {Number}			minHour				可选的最小小时，仅mode=time有效   ( 默认 0 )
   * @property {Number}			maxHour				可选的最大小时，仅mode=time有效	  ( 默认 23 )
   * @property {Number}			minMinute			可选的最小分钟，仅mode=time有效	  ( 默认 0 )
   * @property {Number}			maxMinute			可选的最大分钟，仅mode=time有效   ( 默认 59 )
   * @property {Function}			filter				选项过滤函数
   * @property {Function}			formatter			选项格式化函数
   * @property {Boolean}			loading				是否显示加载中状态   ( 默认 false )
   * @property {String | Number}	itemHeight			各列中，单个选项的高度   ( 默认 44 )
   * @property {String}			cancelText			取消按钮的文字  ( 默认 '取消' )
   * @property {String}			confirmText			确认按钮的文字  ( 默认 '确认' )
   * @property {String}			cancelColor			取消按钮的颜色  ( 默认 '#909193' )
   * @property {String}			confirmColor		确认按钮的颜色  ( 默认 '#3c9cff' )
   * @property {String | Number}	visibleItemCount	每列中可见选项的数量  ( 默认 5 )
   * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩关闭选择器  ( 默认 false )
   * @property {Array}			defaultIndex		各列的默认索引
   * @property {Boolean}		disabled		是否禁用组件
   * @event {Function} close 关闭选择器时触发
   * @event {Function} confirm 点击确定按钮，返回当前选择的值
   * @event {Function} change 当选择值变化时触发
   * @event {Function} cancel 点击取消按钮
   * @example  <u-datetime-picker :show="show" :value="value1"  mode="datetime" ></u-datetime-picker>
   */
  export default {
    name: 'datetime-picker',
    props: {
      // 绑定值
      modelValue: {
        type: [String, Number],
        default: '',
      },
      placeholder: {
        type: String,
        default: '请选择',
      },
      arrow: {
        type: Boolean,
        default: true,
      },
      format: {
        type: String,
        default: '',
      },
      valueFormat: {
        type: String,
        default: '',
      },
      // 是否展示顶部的操作栏
      showToolbar: {
        type: Boolean,
        default: true,
      },
      // 顶部标题
      title: {
        type: String,
        default: '',
      },
      // 展示格式，mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择
      mode: {
        type: String,
        default: 'datetime',
      },
      // 可选的最大时间
      maxDate: {
        type: [Number, String],
        // 最大默认值为后10年
        default: new Date(new Date().getFullYear() + 10, 0, 1).getTime(),
      },
      // 可选的最小时间
      minDate: {
        type: [Number, String],
        // 最小默认值为前10年
        default: new Date(new Date().getFullYear() - 10, 0, 1).getTime(),
      },
      // 可选的最小小时，仅mode=time有效
      minHour: {
        type: Number,
        default: 0,
      },
      // 可选的最大小时，仅mode=time有效
      maxHour: {
        type: Number,
        default: 23,
      },
      // 可选的最小分钟，仅mode=time有效
      minMinute: {
        type: Number,
        default: 0,
      },
      // 可选的最大分钟，仅mode=time有效
      maxMinute: {
        type: Number,
        default: 59,
      },
      // 选项过滤函数
      filter: {
        type: [Function, null],
        default: null,
      },
      // 选项格式化函数
      formatter: {
        type: [Function, null],
        default: () => {
          return (type, value) => {
            if (type === 'year') {
              return `${value}年`
            }
            if (type === 'month') {
              return `${value}月`
            }
            if (type === 'day') {
              return `${value}日`
            }
            if (type === 'hour') {
              return `${value}时`
            }
            if (type === 'minute') {
              return `${value}分`
            }
            return value
          }
        },
      },
      // 是否显示加载中状态
      loading: {
        type: Boolean,
        default: false,
      },
      // 各列中，单个选项的高度
      itemHeight: {
        type: [String, Number],
        default: 44,
      },
      // 取消按钮的文字
      cancelText: {
        type: String,
        default: '取消',
      },
      // 确认按钮的文字
      confirmText: {
        type: String,
        default: '确认',
      },
      // 取消按钮的颜色
      cancelColor: {
        type: String,
        default: '#909193',
      },
      // 确认按钮的颜色
      confirmColor: {
        type: String,
        default: '#3c9cff',
      },
      // 每列中可见选项的数量
      visibleItemCount: {
        type: [String, Number],
        default: 5,
      },
      // 是否允许点击遮罩关闭选择器
      closeOnClickOverlay: {
        type: Boolean,
        default: true,
      },
      // 各列的默认索引
      defaultIndex: {
        type: Array,
        default: () => [],
      },
      // 是否禁用组件
      disabled: {
        type: Boolean,
        default: false,
      },
      allowClear: {
        type: Boolean,
        default: false,
      },
    },
    components: {
      customPicker,
    },
    data() {
      return {
        columns: [],
        innerDefaultIndex: [],
        innerFormatter: (type, value) => value,

        show: false,
      }
    },
    watch: {
      show(newValue, oldValue) {
        if (newValue) {
          this.init()
        }
      },
      propsChange() {
        this.init()
      },
    },
    computed: {
      // 如果以下这些变量发生了变化，意味着需要重新初始化各列的值
      propsChange() {
        return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter]
      },
      // 展示的值
      formatValue() {
        if (this.modelValue) {
          let format = this.format
          if (!format) {
            switch (this.mode) {
              case 'datetime':
                format = 'YYYY-MM-DD HH:mm'
                break
              case 'date':
                format = 'YYYY-MM-DD'
                break
              case 'year-month':
                format = 'YYYY-MM'
                break
              case 'time':
                return this.modelValue
            }
          }
          return dayjs(this.modelValue).format(format)
        } else {
          return ''
        }
      },
    },
    mounted() {
      this.init()
    },
    // #ifdef VUE3
    emits: ['close', 'cancel', 'confirm', 'change', 'update:modelValue'],
    // #endif
    methods: {
      handleClear() {
        this.$emit('update:modelValue', '')
        this.$emit('change', '')
      },
      // 触发
      showpop() {
        if (!this.disabled) {
          this.show = true
        }
      },
      /**
       * 验证十进制数字
       */
      isNumber(value) {
        return /^[\+-]?(\d+\.?\d*|\.\d+|\d\.\d+e\+\d+)$/.test(value)
      },
      /**
       * @description 如果value小于min，取min；如果value大于max，取max
       * @param {number} min
       * @param {number} max
       * @param {number} value
       */
      range(min = 0, max = 0, value = 0) {
        return Math.max(min, Math.min(max, Number(value)))
      },
      /**
       * 验证日期格式
       */
      isDate(value) {
        if (!value) return false
        // 判断是否数值或者字符串数值(意味着为时间戳)，转为数值，否则new Date无法识别字符串时间戳
        if (this.isNumber(value)) value = +value
        return !/Invalid|NaN/.test(new Date(value).toString())
      },
      /**
       * @description 日期的月或日补零操作
       * @param {String} value 需要补零的值
       */
      padZero(value) {
        return `00${value}`.slice(-2)
      },
      init() {
        // #ifdef VUE3
        this.innerValue = this.correctValue(this.modelValue)
        // #endif
        // #ifdef VUE2
        this.innerValue = this.correctValue(this.value)
        // #endif
        this.updateColumnValue(this.innerValue)
      },
      // 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
      setFormatter(e) {
        this.innerFormatter = e
      },
      // 关闭选择器
      close() {
        if (this.closeOnClickOverlay) {
          this.show = false
          this.$emit('close')
        }
      },
      // 点击工具栏的取消按钮
      cancel() {
        this.show = false
        this.$emit('cancel')
      },
      // 处理结果
      handleResult(time, mode) {
        if (this.valueFormat && mode != time) {
          return dayjs(time).format(this.valueFormat)
        }
        switch (mode) {
          case 'datetime':
            return dayjs(time).format('YYYY-MM-DD HH:mm:00')
          case 'date':
            return dayjs(time).format('YYYY-MM-DD')
          case 'year-month':
            return dayjs(time).format('YYYY-MM')
          case 'time':
            return time
          default:
            return ''
        }
      },
      // 点击工具栏的确定按钮
      confirm() {
        let value = this.handleResult(this.innerValue, this.mode)
        // #ifdef VUE3
        this.$emit('update:modelValue', value)
        // #endif
        // #ifdef VUE2
        this.$emit('input', value)
        // #endif

        this.$emit('change', value)
        this.$emit('confirm', value)
        this.show = false
      },
      //用正则截取输出值,当出现多组数字时,抛出错误
      intercept(e, type) {
        let judge = e.match(/\d+/g)
        //判断是否掺杂数字
        if (judge.length > 1) {
          console.error('请勿在过滤或格式化函数时添加数字')
          return 0
        } else if (type && judge[0].length == 4) {
          //判断是否是年份
          return judge[0]
        } else if (judge[0].length > 2) {
          console.error('请勿在过滤或格式化函数时添加数字')
          return 0
        } else {
          return judge[0]
        }
      },
      // 列发生变化时触发
      change(e) {
        const { indexs, values } = e
        let selectValue = ''
        if (this.mode === 'time') {
          // 根据value各列索引，从各列数组中，取出当前时间的选中值
          selectValue = `${this.intercept(values[0][indexs[0]])}:${this.intercept(values[1][indexs[1]])}`
        } else {
          // 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
          const year = parseInt(this.intercept(values[0][indexs[0]], 'year'))
          const month = parseInt(this.intercept(values[1][indexs[1]]))
          let date = parseInt(values[2] ? this.intercept(values[2][indexs[2]]) : 1)
          let hour = 0,
            minute = 0
          // 此月份的最大天数
          const maxDate = dayjs(`${year}-${month}`).daysInMonth()
          // year-month模式下，date不会出现在列中，设置为1，为了符合后边需要减1的需求
          if (this.mode === 'year-month') {
            date = 1
          }
          // 不允许超过maxDate值
          date = Math.min(maxDate, date)
          if (this.mode === 'datetime') {
            hour = parseInt(this.intercept(values[3][indexs[3]]))
            minute = parseInt(this.intercept(values[4][indexs[4]]))
          }
          // 转为时间模式
          selectValue = Number(new Date(year, month - 1, date, hour, minute))
        }
        // 取出准确的合法值，防止超越边界的情况
        selectValue = this.correctValue(selectValue)
        this.innerValue = selectValue
        this.updateColumnValue(selectValue)
      },
      // 更新各列的值，进行补0、格式化等操作
      updateColumnValue(value) {
        this.innerValue = value
        this.updateColumns()
        this.updateIndexs(value)
      },
      // 更新索引
      updateIndexs(value) {
        let values = []
        const formatter = this.formatter || this.innerFormatter
        if (this.mode === 'time') {
          // 将time模式的时间用:分隔成数组
          const timeArr = value.split(':')
          // 使用formatter格式化方法进行管道处理
          values = [formatter('hour', timeArr[0]), formatter('minute', timeArr[1])]
        } else {
          const date = new Date(value)
          values = [
            formatter('year', `${dayjs(value).year()}`),
            // 月份补0
            formatter('month', this.padZero(dayjs(value).month() + 1)),
          ]
          if (this.mode === 'date') {
            // date模式，需要添加天列
            values.push(formatter('day', this.padZero(dayjs(value).date())))
          }
          if (this.mode === 'datetime') {
            // 数组的push方法，可以写入多个参数
            values.push(
              formatter('day', this.padZero(dayjs(value).date())),
              formatter('hour', this.padZero(dayjs(value).hour())),
              formatter('minute', this.padZero(dayjs(value).minute())),
            )
          }
        }

        // 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
        const indexs = this.columns.map((column, index) => {
          // 通过取大值，可以保证不会出现找不到索引的-1情况
          return Math.max(
            0,
            column.findIndex((item) => item === values[index]),
          )
        })
        this.innerDefaultIndex = indexs
      },
      // 更新各列的值
      updateColumns() {
        const formatter = this.formatter || this.innerFormatter
        // 获取各列的值，并且map后，对各列的具体值进行补0操作
        const results = this.getOriginColumns().map((column) => column.values.map((value) => formatter(column.type, value)))
        this.columns = results
      },
      getOriginColumns() {
        // 生成各列的值
        const results = this.getRanges().map(({ type, range }) => {
          let values = times(range[1] - range[0] + 1, (index) => {
            let value = range[0] + index
            value = type === 'year' ? `${value}` : this.padZero(value)
            return value
          })
          // 进行过滤
          if (this.filter) {
            values = this.filter(type, values)
          }
          return { type, values }
        })
        return results
      },
      // 通过最大值和最小值生成数组
      generateArray(start, end) {
        return Array.from(new Array(end + 1).keys()).slice(start)
      },
      // 得出合法的时间
      correctValue(value) {
        const isDateMode = this.mode !== 'time'
        if (isDateMode && !this.isDate(value)) {
          // 如果是日期类型，但是又没有设置合法的当前时间的话，使用最小时间为当前时间
          // value = this.minDate
          // 修改：控制时间为当前时间
          value = new Date()
        } else if (!isDateMode && !value) {
          // 如果是时间类型，而又没有默认值的话，就用最小时间
          value = `${this.padZero(this.minHour)}:${this.padZero(this.minMinute)}`
        }
        // 时间类型
        if (!isDateMode) {
          if (String(value).indexOf(':') === -1) return console.error('时间错误，请传递如12:24的格式')
          let [hour, minute] = value.split(':')
          // 对时间补零，同时控制在最小值和最大值之间
          hour = this.padZero(this.range(this.minHour, this.maxHour, Number(hour)))
          minute = this.padZero(this.range(this.minMinute, this.maxMinute, Number(minute)))
          return `${hour}:${minute}`
        } else {
          // 如果是日期格式，控制在最小日期和最大日期之间
          value = dayjs(value).isBefore(dayjs(this.minDate)) ? this.minDate : value
          value = dayjs(value).isAfter(dayjs(this.maxDate)) ? this.maxDate : value
          return value
        }
      },
      // 获取每列的最大和最小值
      getRanges() {
        if (this.mode === 'time') {
          return [
            {
              type: 'hour',
              range: [this.minHour, this.maxHour],
            },
            {
              type: 'minute',
              range: [this.minMinute, this.maxMinute],
            },
          ]
        }
        const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', this.innerValue)
        const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', this.innerValue)
        const result = [
          {
            type: 'year',
            range: [minYear, maxYear],
          },
          {
            type: 'month',
            range: [minMonth, maxMonth],
          },
          {
            type: 'day',
            range: [minDate, maxDate],
          },
          {
            type: 'hour',
            range: [minHour, maxHour],
          },
          {
            type: 'minute',
            range: [minMinute, maxMinute],
          },
        ]
        if (this.mode === 'date') result.splice(3, 2)
        if (this.mode === 'year-month') result.splice(2, 3)
        return result
      },
      // 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
      getBoundary(type, innerValue) {
        const value = new Date(innerValue)
        const boundary = new Date(this[`${type}Date`])
        const year = dayjs(boundary).year()
        let month = 1
        let date = 1
        let hour = 0
        let minute = 0
        if (type === 'max') {
          month = 12
          // 月份的天数
          date = dayjs(value).daysInMonth()
          hour = 23
          minute = 59
        }
        // 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推
        if (dayjs(value).year() === year) {
          month = dayjs(boundary).month() + 1
          if (dayjs(value).month() + 1 === month) {
            date = dayjs(boundary).date()
            if (dayjs(value).date() === date) {
              hour = dayjs(boundary).hour()
              if (dayjs(value).hour() === hour) {
                minute = dayjs(boundary).minute()
              }
            }
          }
        }
        return {
          [`${type}Year`]: year,
          [`${type}Month`]: month,
          [`${type}Date`]: date,
          [`${type}Hour`]: hour,
          [`${type}Minute`]: minute,
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .date-picker-trigger {
    font-size: 30rpx;
    color: #191c27;
    display: flex;
    align-items: center;
    height: 44rpx;
    line-height: 44rpx;
    .text {
      .selected {
        color: #191c27;
      }
      .placeholder {
        color: #9ea5bb;
      }
    }
    .arrow {
      display: flex;
      align-items: center;
    }
  }
  .date-picker-trigger-disabled {
    .text {
      .selected {
        color: rgb(132, 145, 168);
      }
      .placeholder {
        color: rgb(205, 206, 208);
      }
    }
  }
  .btn-icon-clear {
    display: flex;
    padding-left: 10rpx;
    padding-right: 4rpx;
  }
</style>
